<template>
  <div class="icon-select-dialog">
    <div class="icon-box" :class ="{'icon-box-select': selectIcon === item}" v-for="item in iconList" :key="item" @click="selectIcon = item">
      <div class="custom-icon" :class="item"></div>
      <div class="text">{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'iconSelectDialog',
  data () {
    return {
      iconList: ['jsdkqd-icon', 'jzgc-icon', 'scyj-icon', 'xkfqx-icon', 'xmxx-icon', 'ydgh-icon', 'ydgm-icon', 'zsxx-icon', 'gxgc-icon', 'jtgc-icon', 'qtgc-icon'],
      selectIcon: ''
    }
  }
}
</script>

<style lang="less" scoped>
.icon-select-dialog{
  height: 60vh;
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  .icon-box{
    width: 90px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 5px;
    .custom-icon{
      width: 36px;
      height: 36px;
      background-size: 100% 100%;
      margin-bottom: 15px;
      flex: none;
    }
    .jsdkqd-icon{
      background-image: url("../../../../assets/img/sjzj/jsdkqd-icon.png");
    }
    .jzgc-icon{
      background-image: url("../../../../assets/img/sjzj/jzgc-icon.png");
    }
    .scyj-icon{
      background-image: url("../../../../assets/img/sjzj/scyj-icon.png");
    }
    .xkfqx-icon{
      background-image: url("../../../../assets/img/sjzj/xkfqx-icon.png");
    }
    .xmxx-icon{
      background-image: url("../../../../assets/img/sjzj/xmxx-icon.png");
    }
    .ydgh-icon{
      background-image: url("../../../../assets/img/sjzj/ydgh-icon.png");
    }
    .ydgm-icon{
      background-image: url("../../../../assets/img/sjzj/ydgm-icon.png");
    }
    .zsxx-icon{
      background-image: url("../../../../assets/img/sjzj/zsxx-icon.png");
    }
    .gxgc-icon{
      background-image: url("../../../../assets/img/sjzj/gxgc-icon.png");
    }
    .jtgc-icon{
      background-image: url("../../../../assets/img/sjzj/jtgc-icon.png");
    }
    .qtgc-icon{
      background-image: url("../../../../assets/img/sjzj/qtgc-icon.png");
    }
  }
  .icon-box-select{
    border: 1px solid black;
  }
}
</style>
